<template>
    <view class="columnbox wdh-100 content">
        <view @click="chooseInfo(item)" class="columnbox wdh-100 s-box" v-for="(item,index) in infolist" :key='index'>
            <view class="rowbox wdh-100 spb als top-box">
                <!-- <image mode="aspectFill" class="s-img" :src="JSON.parse(item.listUrl)[0].url"> -->
                <image mode="aspectFill" class="s-img" :src="item.listUrl">
                </image>
                <view class="columnbox als s-info">
                    <view class="rowbox wdh-100 jus">
                        <view class="s-name textovflow">{{item.name}}</view>
                        <view v-if="item.stationType==0" class="rowbox s-qj">旗舰站</view>
                        <view v-else-if="item.stationType==1" class="rowbox s-zz">标准站</view>
                        <view v-else-if="item.stationType==2" class="rowbox s-jm">自助站</view>
                        <view v-else-if="item.stationType==3" class="rowbox s-zd">自动站</view>
                    </view>
                    <view class="rowbox wdh-100 spb" style="margin-top: 20rpx;">
                        <view class="s-address textovflow" style="width: 370rpx;">{{item.address}}</view>
                        <!-- <view class="s-address">1.22KM</view> -->
                    </view>
                    <view class="rowbox wdh-100 jus" style="margin-top: 10rpx;">
                        <view class="s-address">营业状态</view>
                        <view class="s-address" style="color: #17698F;margin-left: 20rpx;">
							{{item.openingType==0?'营业中':'维修中'}}
                        </view>
                    </view>
                    <view class="rowbox wdh-100 jus" style="margin-top: 10rpx;">
                        <view class="s-address">营业时间</view>
                        <view class="s-address" style="margin-left: 10rpx;">
                            {{item.businessHours==0?'0:00～24:00':' 8:00～18:00'}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                pageNum: 1,
                infolist: [],
                total: 0,
                refreshflag: false
            };
        },
        onLoad() {
            this.getStation()
        },
        onShow() {
            if (this.refreshflag) {
                this.refreshflag = false
                this.pageNum = 1
                this.infolist = []
                this.getStation()
            }
        },
        onReachBottom() {
            if (this.infolist.length < this.total) {
                this.pageNum++
                this.getStation()
            }
        },
        methods: {
            deletGongwei(v) {
                uni.navigateTo({
                    url: '/packageA/gongwei/delet?id=' + v.stationId +
                        '&img=' + JSON.parse(v.listUrl)[0].url +
                        '&name=' + v.name +
                        '&address=' + v.address
                })
            },
            // 工位管理
            gongweiManage(v) {
                uni.navigateTo({
                    url: '/packageA/gongwei/index?id=' + v.stationId
                })
            },
            // 添加工位
            addGongwei(v) {
                uni.navigateTo({
                    url: '/packageA/gongwei/add?id=' + v.stationId +
                        '&img=' + JSON.parse(v.listUrl)[0].url +
                        '&name=' + v.name +
                        '&address=' + v.address
                })
            },
            showDetail(v) {
                uni.navigateTo({
                    url: './detail?id=' + v.stationId
                })
            },
            getStation() {
					let that = this;
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							let data = {
								lng: res.longitude,
								lat: res.latitude
							}
							that.$req.get('/xcx/manager/station/list', data).then(res => {
								that.infolist = that.infolist.concat(res.data.rows)
								that.total = res.total
							})
						}
					});
                // this.$req.get('/xcx/station/list/stations', {
                //     pageSize: 20,
                //     pageNum: this.pageNum
                // }).then(res => {
                //     this.infolist = this.infolist.concat(res.data.rows)
                //     this.total = res.total
                // })
            },
            addStation() {
                uni.navigateTo({
                    url: './add'
                })
            },
            chooseInfo(v) {
                let pages = getCurrentPages(); //获取所有页面栈实例列表
                let nowPage = pages[pages.length - 1]; //当前页页面实例
                let prevPage = pages[pages.length - 2]; //上一页页面实例
                prevPage.$vm.station = v
                uni.navigateBack()
            },
        }
    }
</script>


<style lang="scss" scoped>
    .content {
        background: #f7f8fa;
        min-height: 100vh;
        justify-content: flex-start;
        font-family: PingFang SC;
        width: 100%;
        padding-top: 20rpx;
    }

    .s-box {
        padding: 20rpx 20rpx;
        background: #fff;
        border-radius: 20rpx;
        margin-bottom: 32rpx;
        width: 710rpx;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);

        .s-img {
            width: 170rpx;
            height: 120rpx;
            border-radius: 10rpx;
        }

        .s-info {
            width: calc(100% - 190rpx);

            .s-name {
                font-size: 28rpx;
                font-weight: bold;
                max-width: 400rpx;

                text {
                    color: #1E72CA;
                }
            }
        }

        .s-zz,
        .s-jm,
        .s-zd,
        .s-qj {
            background: rgba(119, 40, 245, 0.28);
            color: #7728F5;
            font-size: 24rpx;
            width: 90rpx;
            height: 40rpx;
            border-radius: 10rpx;
            margin-left: 20rpx;
        }

        .s-jm {
            background: #1E72CA;
            color: #fff;
        }

        .s-zd {
            background: rgba(64, 149, 229, 0.25);
            color: #4095E5;
        }

        .s-qj {
            background: rgba(15, 64, 245, 0.25);
            color: #0F40F5;
        }

        .s-zd-status {
            background: rgba(207, 228, 248, 1);
            border-radius: 10rpx;
            margin-top: 20rpx;
            margin-right: 20rpx;

            .s-zd-status-title {
                background: #1F63FF;
                color: #fff;
                font-size: 24rpx;
                border-radius: 10rpx;
                padding: 4rpx 4rpx;
                line-height: 40rpx;
            }

            .s-zd-status-detail {
                font-size: 22rpx;
                color: #1F63FF;
                padding: 0 10rpx;

                text {
                    color: rgba(#1F63FF, 0.5)
                }
            }
        }

        .zz-status {
            background: rgba(119, 40, 245, 0.16);
        }

        .s-address {
            font-size: 24rpx;
            color: #6D6A6B;
        }

        .location-box {
            font-size: 24rpx;
            color: #448DFB;

            image {
                width: 20rpx;
                height: 20rpx;
            }
        }

        .s-serve {
            background: rgba(56, 148, 254, 0.1);
            color: #1E72CA;
            font-size: 24rpx;
            padding: 10rpx 20rpx;
            border-radius: 10rpx;
            margin-top: 20rpx;
            line-height: 40rpx;
        }

        .s-order-btn {
            margin-top: 20rpx;
            font-size: 28rpx;
            color: #fff;
            background: #1E72CA;
            width: 140rpx;
            height: 62rpx;
            border-radius: 10rpx;
        }

        .top-box {}
    }

    .tjgw,
    .scgw,
    .gwgl {
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        line-height: 32rpx;
        border-radius: 10rpx;
        border: #1F63FF solid 1px;
        color: #1F63FF;
        margin-left: 20rpx;
    }

    .scgw {
        border: #BD3124 solid 1px;
        color: #BD3124;
    }

    .gwgl {
        border: #17698F solid 1px;
        background: #17698F;
        color: #fff;
    }
</style>